<template>
  <div style="height:100vh;background: #e8e8e8;">
    <div class="title">图片上传</div>
    <van-form
      id="detail"
      @submit="onSubmit"
      style="background: rgb(232, 232, 232);"
    >
      <van-field
        v-model="code"
        name="code"
        label="辅料编号"
        clearable
        placeholder="辅料编号"
        @blur="getList"
        @click-right-icon="scanCode"
        :rules="[{ required: true, message: '请填写辅料编号' }]"
      >
      <van-icon name="scan" slot='right-icon' style="padding: 0 5px;font-size: 20px!important;color:black!important;"></van-icon>
      
      </van-field>
      <van-cell
        title="产品编码"
        :value="form.code"
      />
      <van-cell
        title="辅料名称"
        :value="form.name"
      />
      <van-field
        name="uploader"
        label="图片上传"
      >

        <template #input>
          <div style="width:100%">
            <JImageUpload
              style="display:flex;flex-wrap: wrap;width:100%"
              :uploadParams="getUploadParams()"
              :isMultiple="true"
              :number="5"
              :fileSize="15"
              @fileChange="fileChange"
              v-model="imageList"
            ></JImageUpload>
          </div>
        </template>

      </van-field>

      <div style="margin: 16px;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >提交</van-button>
      </div>
    </van-form>
  </div>

</template>
<script type=\'text/javascript\' src=\'//g.alicdn.com/sj/lib/zepto/zepto.min.js\' charset=\'utf-8\'></script>
<script type="text/javascript" src="http://g.alicdn.com/ilw/ding/0.9.2/scripts/dingtalk.js"></script>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import * as dd from 'dingtalk-jsapi'
import { postAction } from '@/api/manage'
import { Notify } from 'vant'

export default {
  components: {
    JImageUpload
  },
  data() {
    return {
      form: {},
      imageList: [],
      newLifePhotos: [],
      allimageList: [],
      code: '',
      materialId: ''
    }
  },
  computed: {
    jobNumber() {
      return localStorage.getItem('jobNumber')
    }
  },
  created: function () {
    document.title = '图片上传'
    if (this.id) {
      this.getDetail()
    }
  },
  mounted() {},
  methods: {
    scanCode() {
      let that = this
      dd.biz.util.scan({
        type: 'barCode', //type为qrCode或者barCode 二维和一维
        onSuccess: function (data) {
          // const arr = data.text.split('.com')
          that.code = data.text
          if (that.code) {
            that.getList()
          }
          //  $("#tm").val(data.text);   //将扫描结果写到界面 tm字段中
        },
        onFail: function (err) {
          // alert('scan fail:' + JSON.stringify(err))
        }
      })
    },
    onBlur() {
      window.scroll(0, 0)
    },
    getList() {
      this.imageList = []
      window.scroll(0, 0)
      this.loading = true
      if (this.code) {
        const params = {
          accCode: this.code
        }
        try {
          postAction(`/basemgt-material/accessories/info`, params).then(res => {
            if (res.code == 200) {
              this.form = res.data
              this.materialId = res.data.accId
              if (res.data.imageList.length) {
                res.data.imageList.map(item => {
                  this.imageList.push(item.url)
                })
                this.allimageList = res.data.imageList
              }
            } else {
              if (res.msg) {
            Notify({ type: 'warning', message: res.msg })

              } else {
                           Notify({ type: 'warning', message: '获取列表失败！' })

              }
            }
          })
        } catch (error) {
            Notify({ type: 'warning', message: '获取列表失败！' })

        } finally {
          this.loading = false
        }
      } else {
        this.form = {}
        this.supply = ''
        this.specs = ''
      }
    },
    fileChange(list) {
      this.newLifePhotos = list
    },
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    onSubmit() {
      const arr1 = []
      this.newLifePhotos.map(item => {
        arr1.push(item.url)
      })
      // console.log(arr1);
      const newImage = []
      arr1.map(x => {
        this.allimageList.map(y => {
          if (x == y.url) {
            const obj = {
              id: y.id,
              jobNumber: this.jobNumber,
              type: 10,
              url: y.url
            }
            newImage.push(obj)
          }
        })
      })

      let arr = this.allimageList.map(item => item.url)
      // console.log(arr);
      let newArr = arr1.filter(item => !arr.includes(item))
      // console.log(newArr);
      newArr.map(item => {
        const obj = {
          id: '',
          jobNumber:this.jobNumber,
          type: 10,
          url: item
        }
        newImage.push(obj)
      })
      console.log(newImage)
      const params = {
        jobNumber: this.jobNumber,
        materialId: this.materialId,
        imageList: newImage,
        type: 10
      }
      try {
        postAction(`/basemgt-material/material/image/update`, params).then(res => {
          if (res.code == 200) {
            // this.form = res.data
            Notify({ type: 'success', message: '操作成功！' })
            this.$router.push({ path: 'main' })
          } else {
            Notify({ type: 'warning', message: '操作失败！' })
          }
        })
      } catch (error) {
            Notify({ type: 'warning', message: '操作失败！' })

      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
.upload::after {
  content: '*填写说明：ID需露出';
  color: red;
  font-size: 12px;
}
.info::after {
  content: '*填写说明：售卖品牌、货季、折扣等';
  color: red;
  font-size: 12px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
</style>
<style>
#detail .van-field--disabled .van-field__label {
  color: #646566;
}
</style>